<template>
  <div>
    <TopFilter :list="topFilterList" :cols="2" labelWidth="120" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="inOutReport11cesskd"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :onRowSelectChange="rowSelectHandle"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :isSelectColumn="true"
      :onSyncTableData="tableHandle"
      :dataSource="dataSource"
    >
      <template slot="moreActions">
        <span @click="removeRecordHandle">删除数据</span>
      </template>
      <template slot="controls">
        <el-button size="small" type="primary" @click="addRecordHandle">数据上传</el-button>
        <!-- <AjaxButton size="small" type="primary" :click="deleteHandle">删除</!-->
      </template>
    </FilterTable>
    <!-- 新增数据上传 -->
    <BaseDialog :visible.sync="visibleUpload" title="数据上传" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <uploadAction type="edit" :modifyType="modifyType" :rowData="formData" @close="closeHandler22" @close2="closeHandler2" />
    </BaseDialog>
  </div>
</template>

<script>
/*
 *
 * 全车线束查询
 */

import { authority } from '@/utils/authMixin';
import { harnessQueryInfo, harnessDelete } from '@/api/part/report/harnessInquiry';
import moment from 'moment';
import { confirmAction, notifyAction } from '@/utils';
import uploadAction from './uploadAction';
export default {
  name: 'qcxscx',
  components: { uploadAction },
  mixins: [authority],
  data() {
    this.selectedRow = [];
    return {
      visible: false,
      visibleUpload: false,
      modifyType: true, // 该页面默认为修改
      topFilterList: this.createTopFilters(),
      fetchApi: harnessQueryInfo,
      columns: this.createTableColumns(),
      fetchParams: { xhrAbort: true },
      dialogTitle: '', // 子组件标题
      handleType: '', // 向子页面传的类型
      formData: {}, // 向子组件传数据的数组
      tableData: [], // 表单数据,
      dataSource: [], // 测试数据
      harnessType: [
        // { text: '全部', value: '' },
        { text: '内饰线束', value: 'N' },
        { text: '仪表线束', value: 'Y' },
        { text: '发动机机舱', value: 'F' }
      ],
      deleteData: []
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    // 搜索
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    createHarnessType(val) {
      let res = '全部';
      if (!val) return res;
      res = this.harnessType.find(item => item.value == val).text;
      return res;
    },
    // table动态回调函数
    tableHandle(val) {
      this.tableData = val;
      console.log(this.tableData);
    },
    // 页面删除按钮
    deleteHandle() {},
    // 选中行数据
    rowSelectHandle(rows) {
      // 清空之前选中数据
      this.deleteData = [];
      this.selectedRow = rows;
      console.log(123123, this.deleteData);

      this.selectedRow.forEach(element => {
        let temp = Object.assign({}, element, { XSTYP: '' });
        // s.XSTYP = '';
        switch (element.TYPT) {
          case '内饰线束':
            temp.XSTYP = 'N';
            break;
          case '仪表线束':
            temp.XSTYP = 'Y';
            break;
          case '发动机机舱':
            temp.XSTYP = 'F';
            break;
          default:
            break;
        }
        this.deleteData.push(temp);
      });
      console.log(this.deleteData, 'sasdfa');
    },
    // 移除数据记录
    async removeRecordHandle() {
      console.log('加油老铁');
      await confirmAction('此操作将删除该记录, 是否继续?');

      // console.log(this.selectedRow, this.deleteData, '删除数据222');

      const res = await harnessDelete(this.deleteData);
      if (res.resultCode === 200) {
        if (res.data) {
          return this.$notify.success({ title: '提示信息', message: '删除成功' });
        }
        return this.$notify.error({ title: '提示信息', message: '删除失败' });
      }
    },
    addRecordHandle() {
      this.visibleUpload = true;
    },
    closeHandler2(val, type) {
      this.visible = val;
      this.visibleUpload = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    closeHandler22(val, type) {
      this.visible = val;
      this.visibleUpload = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    createTopFilters() {
      return [
        {
          type: 'INPUT',
          label: '底盘号',
          fieldName: 'I_VIN'
        },
        {
          type: 'SELECT',
          label: '线束类型',
          fieldName: 'I_XSTYPE',
          itemList: [
            // { text: '全部', value: '' },
            { text: '内饰线束', value: 'N' },
            { text: '仪表线束', value: 'Y' },
            { text: '发动机机舱', value: 'F' }
          ]
        },
        {
          type: 'RANGE_DATE',
          label: '经销商创建日期',
          dateType: 'daterange',
          // initialValue: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
          initialValue: [
            moment()
              .startOf('month')
              .format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ],
          // initialValue: ['2018-09-19', '2018-10-19'],
          style: { minWidth: '120px' },
          fieldName: 'I_DATES|I_DATEE',
          rules: [
            {
              required: true,
              message: '两个确认日期之间相隔不能大于60天',
              trigger: 'change'
            },
            {
              validator: (rule, value, callback) => {
                let start = moment(value[0]);
                let end = moment(value[1]);
                if (end.diff(start, 'days') < 60) {
                  callback();
                } else {
                  callback(new Error('两个确认日期之间相隔不能大于60天'));
                }
              },
              trigger: ['blur', 'change']
            }
          ]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '底盘号',
          dataIndex: 'SERNR',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '供应商号',
          dataIndex: 'LIFNR',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '线束类型',
          dataIndex: 'TYPT',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [
            { text: '全部', value: '' },
            { text: '内饰线束', value: 'N' },
            { text: '仪表线束', value: 'Y' },
            { text: '发动机机舱', value: 'F' }
          ],
          showOverflowTooltip: true
        },
        {
          title: '线束号',
          dataIndex: 'MATNR',
          align: 'center',
          width: '160',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '经销商创建日期',
          dataIndex: 'KUDAT',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          showOverflowTooltip: true
        },
        {
          title: '经销商创建时间',
          dataIndex: 'KUTIM',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          showOverflowTooltip: true
        },
        {
          title: '经销商创建人',
          dataIndex: 'KUNAM',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '供应商创建日期',
          dataIndex: 'DWDAT',
          dateFormat: 'yyyy-MM-dd',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          showOverflowTooltip: true
        },
        {
          title: '供应商创建时间',
          dataIndex: 'DWTIM',
          align: 'center',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          showOverflowTooltip: true
        },
        {
          title: '供应商创建人',
          dataIndex: 'DWNAM',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '经销商备注',
          dataIndex: 'KUREM',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '供应商备注',
          dataIndex: 'VEREM',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '配件部备注',
          dataIndex: 'MAREM',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        }
      ];
    }
  }
};
</script>

<style lang="less" scoped></style>
